<template>
  <div class="diary-container">
    <h1>发布旅游日记</h1>
    <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
      <!-- 标题 -->
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入日记标题" />
      </el-form-item>

      <!-- 旅行日期 -->
      <el-form-item label="旅行日期" prop="date">
        <el-date-picker
          v-model="form.date"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <!-- 地点选择 -->
      <el-form-item label="地点" prop="location">
        <el-select
          v-model="form.location"
          placeholder="请选择旅行地点"
          filterable
        >
          <el-option
            v-for="item in locations"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 图片上传 -->
      <el-form-item label="照片">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleUpload"
          :file-list="fileList"
          multiple
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <!-- 日记内容 -->
      <el-form-item label="内容" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="6"
          placeholder="记录你的旅行故事..."
        />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即发布</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import {useRoute} from "vue-router";

const route=useRoute();
const spotID=parseInt(route.params.id);

// 表单数据
const form = reactive({
  title: "",
  date: "",
  location: "",
  content: "",
});

// 表单验证规则
const rules = reactive({
  title: [
    { required: true, message: "请输入标题", trigger: "blur" },
    { min: 3, max: 30, message: "长度在 3 到 30 个字符", trigger: "blur" },
  ],
  date: [{ required: true, message: "请选择日期", trigger: "change" }],
  location: [{ required: true, message: "请选择地点", trigger: "change" }],
  content: [{ required: true, message: "请输入日记内容", trigger: "blur" }],
});

// 地点选项
const locations = ref([
  { value: "paris", label: "法国巴黎" },
  { value: "tokyo", label: "日本东京" },
  { value: "sydney", label: "澳大利亚悉尼" },
  { value: "newyork", label: "美国纽约" },
  { value: "bupt" , label:"北京邮电大学"},
]);

// 图片上传处理
const fileList = ref([]);
const handleUpload = (file) => {
  fileList.value.push(file);
};

// 提交表单
const submitForm = () => {
  // 构造表单数据
  const formData = new FormData();
  formData.append("title", form.title);
  formData.append("date", form.date);
  formData.append("location", form.location);
  formData.append("content", form.content);

  // 添加图片文件
  fileList.value.forEach((file) => {
    formData.append("images", file.raw);
  });

  // 这里可以添加实际提交逻辑
  console.log("提交数据:", Object.fromEntries(formData));
  ElMessage.success("日记提交成功！");
  resetForm();
};

// 重置表单
const resetForm = () => {
  form.title = "";
  form.date = "";
  form.location = "";
  form.content = "";
  fileList.value = [];
};
</script>

<style scoped>
.diary-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}

.el-select {
  width: 100%;
}

.el-textarea__inner {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", sans-serif;
}
</style>